<template>
  <div class="person">
    <h2>汽车信息:一辆{{ car.brand }}车,价值{{ car.price }}万</h2>
    <button @click="changePrice">修改汽车的价格</button>
    <br>
    <button @click="changeBrand">修改汽车品牌</button>
    <br>
    <button @click="changeCar">修改整个汽车</button>
    <hr>
    <h2>求总和sum是--->{{ sum }}</h2>
    <button @click="changeSum">修改总和</button>
  </div>
</template>

<script lang='ts' setup name="Person">
import { ref } from 'vue'
import { reactive } from 'vue';

//数据
let car = ref({ brand: '奔驰', price: 100 })
let sum = ref(0)

function changeSum() {
  sum.value += 1;
}
function changePrice() {
  car.value.price += 10;
}
function changeBrand() {
  car.value.brand = '宝马';
}
function changeCar() {
  //整体改:car = {brand:'奥拓',price:1} //这么写页面不会更新
  //car = reactive({brand:'奥拓',price:1})//这么写页面也不更新

  //下面这个写法可以更新页面 感觉跟memcpy一样复制过去
  //reactive不可以整体改,而ref可以整体改，是因为.Value的存在
  //reactive要用到Object.assign()函数
  //Object.assign(car, { brand: '奥拓', price: 1 });
  car.value = { brand: '奥拓', price: 1 }
}
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>